var imgWidth = 75;
var imgHeight = 75;
var imgX;
var imgY;
var imgInfoWidth = 150;
var imgInfoHeight = 90;
var modelX = 50;
var modelY = 200;
var modelWidth = 500;
var modelHeight = 500;
var zIndexCount = 1;
var t1;
var partMap = {
	"picture/pearl1.png": [1,"Pearl1", "purple", 18.1],
	"picture/pearl2.png": [2,"Pearl2", "black", 38.2],
	"picture/pearl3.png": [3,"Pearl3", "lightgreen", 28.3],
	"picture/pendant1.png": [4,"Pendant1", "blue", 78.4],
	"picture/pendant2.png": [5,"Pendant2", "green", 88.5],
	"picture/pendant3.png": [6,"Pendant3", "edge-piping", 98.6]
};
var dragAttrs = {
	opacity: "0.6",
	cursor: "pointer",
	helper: "clone",
	revert: "invalid",
	scope: "img",
	cursorAt: {left: imgWidth / 2, top: imgHeight / 2}
};

	$(function(){
		$("#WORKBENCH img").draggable(dragAttrs).live({
			"dragstart":
			function(event, ui){
				imgX = event.pageX;
				imgY = event.pageY;
			},
			"dragstop":
			function(event, ui){
				if(isInModel(event.pageX, event.pageY)){
					var imgPos = getCoordinateInModel(event.pageX, event.pageY);
					$(this).css({
						"position": "absolute",
						"left": imgPos["x"] - 50,
						"top": imgPos["y"] - 200
					})
					imgX = imgPos["x"];
					imgY = imgPos["y"];
				}
			}
		});
		$("#MATERIAL img").draggable(dragAttrs);
		
		$("#MATERIAL img").mouseover(function(e){
			removeImgInfoDiv();
			$(this).css("cursor", "pointer");
			var imgInfo = partMap[$(this).attr("src")];
			var imgInfoDiv = "<div id='imgInfoDiv'>"+imgInfo.join("   ")+"</div>";
			$("#MATERIAL").append(imgInfoDiv);
			$("#imgInfoDiv").css({
				"z-index": 999,
				"position": "absolute",
				"left": $(this).offset().left + imgWidth / 2 - 600,
				"top": $(this).offset().top + imgHeight / 2 - 200,
				"width": 200,
				"height": 30,
				"border": "1px solid lightgrey",
				"background-color": "black",
				"color": "white",
				"display": "none"
			});
			
			if(!t1){
				t1=setTimeout(function(){
					$("#imgInfoDiv").show(100);
				},
				300);
			}
		}).mouseout(function(){
			removeImgInfoDiv();
			t1 = null;
		});
		
		$("#Complete").click(function(){
			var sum = 0;
			$("#TABLE tr:gt(0)").each(function(idx, ele){
				sum += parseFloat($(this).children("td:nth-child(6)").text());
			});
			$("#TABLE tr:eq(0) th:last-child").text(convNum(sum));
		});
		
		$("#Reset").click(function(){
			$("#WORKBENCH img").remove();
			$("#TABLE tr:gt(0)").remove();
			$("#TABLE tr:eq(0) th:last-child").text("Sub Total");
		});
		
		$("#WORKBENCH").droppable({
			scope: "img",
			drop: function(event, ui){
				var dragImg = ui.draggable.clone();
				dragImg.appendTo($(this));
				dragImg.css("z-index", zIndexCount++);
				
				var imgInfo = partMap[dragImg.attr("src")];
				addOrDeleteRow(true, imgInfo);
				var imgPos = getCoordinateInModel(event.pageX, event.pageY);
				dragImg.css({
					"position": "absolute",
					"left": imgPos["x"] - 50,
					"top": imgPos["y"] - 200
				}).draggable({
					opacity: "0.6",
					cursor: "pointer",
					cursorAt: {left: imgWidth / 2, top: imgHeight / 2},
					stop: function(event, ui){
						if(!isInModel(event.pageX, event.pageY)){
							$(this).remove();
							addOrDeleteRow(false, imgInfo);
						}
					}
				});
			}
		});
	});
	
	function isInModel(mouseX, mouseY){
		if(mouseX < modelX || mouseX > modelX + modelWidth || mouseY < modelY || mouseY > modelY + modelHeight)
			return false;
		else
			return true;
	}
	
	function getCoordinateInModel(mouseX, mouseY){
		var newX = mouseX - imgWidth / 2;
		var newY = mouseY - imgHeight / 2;
		if(mouseX < modelX + imgWidth / 2)
			newX = modelX;
		else if(mouseX > modelX + modelWidth - imgWidth / 2)
			newX = modelX + modelWidth - imgWidth;
		if(mouseY < modelY + imgHeight / 2)
			newY = modelY;
		else if(mouseY > modelY + modelHeight - imgHeight / 2)
			newY = modelY + modelHeight - imgHeight;
		return {"x": newX, "y": newY};
	}
	
	function addOrDeleteRow(isAdding, info){
		var target;
		$("#TABLE tr:gt(0)").each(function(){
			if($(this).children("td:nth-child(2)").text() == info[1]){
				target = $(this);
			}
		});
		if(target){
			var oldNum = parseInt(target.children("td:nth-child(5)").text());
			var unitPrice = parseInt(target.children("td:nth-child(4)").text());
			var subTotal = parseInt(target.children("td:nth-child(6)").text());
		}
		
		if(isAdding){
			if(target){
				target.children("td:nth-child(5)").text(oldNum + 1);
				target.children("td:nth-child(6)").text(convNum(subTotal + unitPrice));
			}else{
				$("#TABLE tr:eq(0)").after("<tr bgcolor='#FFFFFF'><td>"+info[0]+"</td><td>"+info[1]+"</td><td>"+info[2]+"</td><td>"+info[3]+"</td><td>1</td><td>"+convNum(info[3])+"</td></tr>");
			}
		}else{
			if(oldNum > 1){
				target.children("td:nth-child(5)").text(oldNum - 1);
				target.children("td:nth-child(6)").text(convNum(subTotal - unitPrice));
			}
			else{
				target.remove();
			}
		}
	}
	
	function convNum(num){
		var v = new Number(num);
		return v.toFixed(2);
	}
	
	function removeImgInfoDiv(){
		clearTimeout(t1);
		if($("#imgInfoDiv"))
			$("#imgInfoDiv").remove();
	}
